<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #main{width: 50px;;background: red}
    </style>
</head>
<body>
    <div id="main">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
    <script>
        var main=document.getElementById('main')
        var observer=new MutationObserver(function(mutations,observer){
            // console.log(mutations)
            mutations.forEach((el)=>{
                console.log(el)
            })
        })
        observer.observe(main,{
            attributes:true,
            childList:true,
            characterData:true,
            subtree:true
        })
        main.addEventListener('click',function(){
            setTimeout(function() {
                console.log('timeout');
            }, 0);

            Promise.resolve().then(function() {
                console.log('promise');
            });
            var child=this.getElementsByTagName('p');
            [].forEach.call(child,(el) => {
                // console.log(el)
                el.setAttribute('data-num',Math.random())
            })
            // child.forEach();
            // console.log(child)
            
        })
    </script>
</body>
</html>